<template>
  <div>
    <VuePlayerVideo ref="player" :src="url"></VuePlayerVideo>
  </div>
</template>
<script>
  import VuePlayerVideo from 'vue3-player-video'
  import { ref, onUnmounted, computed } from 'vue'
  export default {
    name: 'XMPlayer',
    components: {
      VuePlayerVideo,
    },
    props: { src: String },
    setup(props) {
      const player = ref(null)
      const url = computed(() => {
        return props.src
      })
      // 数据更新之前
      onUnmounted(() => {})
      const onPlay = () => {
        console.log('播放')
      }
      const onPause = (ev) => {
        console.log(ev, '暂停')
      }

      const onTimeupdate = (ev) => {
        console.log(ev, '时间更新')
      }
      const onCanplay = (ev) => {
        console.log(ev, '可以播放')
      }
      return {
        // options,
        onPlay,
        onPause,
        onTimeupdate,
        onCanplay,
        player,
        url,
      }
    },
  }
</script>
<style scoped>
  .video-box {
    width: 1000px;
    padding: 20px;
  }
</style>
